Meteor-এ AutoForm একটি জনপ্রিয় প্যাকেজ, যা ফর্ম তৈরি ও পরিচালনা করতে অনেক সুবিধা প্রদান করে। এটি আপনাকে MongoDB Collections এর সাথে সংযুক্ত ফর্ম তৈরি করতে সাহায্য করে এবং এতে স্বয়ংক্রিয়ভাবে ফর্মের validation, error handling, এবং submit প্রক্রিয়া পরিচালনা করা যায়।
AutoForm প্যাকেজটি আপনাকে সহজে ফর্ম validation সেটআপ করতে দেয়। এটি সাপোর্ট করে simple-schema প্যাকেজের মাধ্যমে ডাটা ভ্যালিডেশন, যেখানে আপনি আপনার MongoDB ডাটাবেসের জন্য schema তৈরি করতে পারেন এবং সেই schema এর মাধ্যমে ফর্মের ইনপুট ভ্যালিডেশন করতে পারেন।
নিচে AutoForm ব্যবহার করে ফর্ম validation সেটআপের পুরো প্রক্রিয়া দেয়া হলো।
Step 1: AutoForm এবং SimpleSchema প্যাকেজ ইনস্টল করা
AutoForm প্যাকেজ ব্যবহার করতে আপনাকে প্রথমে AutoForm এবং SimpleSchema প্যাকেজ দুটি ইনস্টল করতে হবে।
AutoForm ইনস্টল করুন:
meteor add autoformSimpleSchema ইনস্টল করুন:
meteor add aldeed:simple-schema
Step 2: Schema তৈরি করা
AutoForm ফর্মে validation পরিচালনা করার জন্য আপনাকে একটি SimpleSchema তৈরি করতে হবে। SimpleSchema দিয়ে আপনি ফিল্ডগুলোর জন্য কাস্টম ভ্যালিডেশন এবং টাইপ ডিফাইন করতে পারেন।
উদাহরণস্বরূপ, একটি User Registration ফর্মের জন্য SimpleSchema তৈরি করা:
import SimpleSchema from 'simpl-schema';
const userSchema = new SimpleSchema({
name: {
type: String,
min: 3, // কমপক্ষে ৩টি অক্ষর
max: 100, // সর্বোচ্চ ১০০টি অক্ষর
label: "Name",
optional: false,
},
email: {
type: String,
regEx: SimpleSchema.RegEx.Email, // ইমেইল ফরম্যাট চেক
label: "Email",
optional: false,
},
password: {
type: String,
min: 6, // পাসওয়ার্ড কমপক্ষে ৬ অক্ষরের হতে হবে
label: "Password",
optional: false,
},
});
export default userSchema;
এই schema এ তিনটি ফিল্ড রয়েছে: name, email, এবং password। প্রতিটি ফিল্ডের জন্য ভ্যালিডেশন সেট করা হয়েছে। যেমন name এর জন্য min এবং max, email এর জন্য ইমেইল ফরম্যাট চেক, এবং password এর জন্য min-6 ভ্যালিডেশন।
Step 3: AutoForm ফর্ম তৈরি করা
এখন আপনাকে AutoForm ব্যবহার করে ফর্ম তৈরি করতে হবে এবং SimpleSchema এর সাথে সংযুক্ত করতে হবে।
import { AutoForm } from 'meteor/autoform';
import userSchema from './userSchema';
const UserForm = () => (
<AutoForm
schema={userSchema}
onSubmit={data => {
// ফর্ম সাবমিট হলে, আপনি এখানে ডেটা প্রসেস করতে পারবেন
console.log("Form data: ", data);
}}
/>
);
এখানে AutoForm ফর্ম তৈরি করা হয়েছে এবং schema প্রপস হিসেবে userSchema প্রদান করা হয়েছে। আপনি যখন ফর্ম সাবমিট করবেন, তখন তা onSubmit হ্যান্ডলার দ্বারা প্রসেস করা হবে।
Step 4: Error Handling এবং Custom Validation
AutoForm স্বয়ংক্রিয়ভাবে validation errors শো করে, তবে আপনি custom validation এবং error handling করতে পারেন।
Error message কাস্টমাইজ করা: আপনি SimpleSchema তে কাস্টম error messages দিতে পারেন। উদাহরণস্বরূপ:
const userSchema = new SimpleSchema({ name: { type: String, min: 3, max: 100, label: "Name", optional: false, custom() { if (this.value === "bad name") { return "invalidName"; // কাস্টম error message } }, }, }); // custom error message userSchema.messageBox({ invalidName: "Name cannot be 'bad name'", });Error handling in AutoForm: AutoForm এর মাধ্যমে আপনি validation errors দেখতে পারবেন এবং এর মাধ্যমে সাবমিট না হওয়া ডেটার ক্ষেত্রে নির্দিষ্ট ভ্যালিডেশন দেখানো হবে।
<AutoForm schema={userSchema} onSubmit={data => { console.log("Form data: ", data); }} onError={(errors) => { console.log("Validation Errors: ", errors); }} />
Step 5: ফর্ম স্টাইলিং এবং UI কাস্টমাইজেশন
AutoForm আপনাকে ফর্মের জন্য Bootstrap বা অন্য কোনও CSS ফ্রেমওয়ার্ক ব্যবহার করার সুবিধা দেয়। আপনি ফর্মের UI কাস্টমাইজ করতে পারেন:
Bootstrap ফর্ম স্টাইলিং: AutoForm সাধারণত Bootstrap এর সাথে খুব ভাল কাজ করে। আপনি যদি Bootstrap ব্যবহার করতে চান, তবে সঠিক স্টাইলিং অ্যাড করতে পারেন:
meteor add twbs:bootstrap- Custom Fields and Inputs: আপনি আপনার ফর্মের ইনপুট ফিল্ড কাস্টমাইজ করতে পারেন, যেমন Date Picker, Custom Dropdown ইত্যাদি।
সারাংশ
AutoForm প্যাকেজ ব্যবহার করে ফর্ম তৈরি করা এবং ভ্যালিডেশন করা সহজ এবং কার্যকরী। SimpleSchema এর মাধ্যমে আপনি ফিল্ড ভিত্তিক কাস্টম ভ্যালিডেশন তৈরি করতে পারেন এবং AutoForm এর মাধ্যমে ফর্মে error handling, submit actions এবং UI customization করতে পারেন। এটি ডেভেলপারদের জন্য একটি শক্তিশালী টুল যা MongoDB ডাটাবেসের সাথে একীভূত হয়ে ডেটা সংরক্ষণ এবং রিয়েল-টাইম ভ্যালিডেশন সম্ভব করে তোলে।
Read more
